﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Product.Master" Inherits="System.Web.Mvc.ViewPage<SDT.Site.ViewModels.ProductDetailsModels>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	<%=Model.Product!=null? Html.Encode(Model.Product.Title):string.Empty %>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="http://maps.google.com/maps?file=api&amp;v=3&amp;sensor=true&amp;key=<%= Model.GoogleAPI %>" type="text/javascript"></script>
<div class="content">
    <div class="pro-detail">
        <h2><%=Html.Encode(Model.Product.Title) %></h2>
        <h3><label>Mô tả <%=Model.Product.ProductCategory.Name.Substring(4) %></label></h3>
        <pre style="margin: 0px 5px 0 5px;">
            <%=Model.Product.Summary %>
        </pre>
        <div class="pinfo">
                Giá bán:
                <span>
                    <%=Model.Product.Cost != null && Model.Product.Cost > 0 ? SDT.Lib.Common.Utils.ReadNumber(Model.Product.CurrencyID.HasValue && Model.Product.CurrencyID.Value == 1 ? (double)Model.Product.Cost : (double)Model.Product.TotalCost) + "&nbsp;" + Model.Product.UnitCost : "Thỏa thuận"%></span>
                <span class="pad">&nbsp;</span>
                Diện tích:  <span><%=Model.Product.Area %>m&sup2;</span> <span class="pad">&nbsp;</span>
                Quận/huyện: <span><%=Html.Encode(Model.Product.District.Name)%>,&nbsp;<%=Html.Encode(Model.Product.City.Name)%></span>
        </div>
        <div class="img-map">
            <%var listImg = SDT.Lib.Common.Utils.GenThumbnailInFolder(Model.Product.ID, 500, 375, Model.ImagePath, Model.ImageUrl);
              var listThumImg = SDT.Lib.Common.Utils.GenThumbnailInFolder(Model.Product.ID, 80, 60, Model.ImagePath, Model.ImageUrl); %>
            <%if (listThumImg.Length > 0 && listImg.Length > 0)
              { %>      
            <div id="photo" class="photo">
                
                <div class="showimg" id="showimg" style="text-align:center">
                    <%if (listImg.Length > 0)
                      { %>
                      <a href="<%=listImg[0] %>">
                        <img src="<%=listImg[0]%>" alt="<%=Html.Encode(Model.Product.Title) %>" />
                      </a>
                    <%} %>
                </div>
                <div class="listimg" id="listimg">                    
                  <ul>
                    <%for (int i = 0; i < listThumImg.Length; i++)
                      { %>
                      <li style="cursor: pointer;" onclick="showBigImg('<%=listImg[i] %>');">
                        <img width="80" height="60" class="bor_img" alt="<%=Html.Encode(Model.Product.Title) %>" src="<%=listThumImg[i] %>" />			
                      </li>
                    <%} %>
                  </ul>
                </div>
            </div>
            <%} %>
            <%if (Model.Product.Latitube != null && Model.Product.Longitude != null)
              { %>
            <div id="map" class="map">
                <%= Html.HiddenFor(m=>m.Product.Longitude) %>
                <%= Html.HiddenFor(m=>m.Product.Latitube) %>
                <div id="map_canvas" style="width: 100%; height: 400px; padding-bottom: 10px; position: relative;"></div>
                <script type="text/javascript">
                    function initialize() {
                        if (GBrowserIsCompatible()) {
                            map = new GMap2(document.getElementById("map_canvas"));
                            map.setCenter(new GLatLng(21.033, 105.850), 15);
                            map.setUIToDefault();
                            geocoder = new GClientGeocoder();
                            var marker = new GMarker(new GLatLng(21.033, 105.850), { draggable: true });

                            //Draggable marker
                            GEvent.addListener(marker, "dragstart", function() {
                                map.closeInfoWindow();
                            });
                            GEvent.addListener(marker, "dragend", function() {

                                //marker.openInfoWindowHtml("aaaaa"+ marker.getLatLng());
                                document.getElementById("Product_Latitube").value = marker.getLatLng().lat();
                                document.getElementById("Product_Longitude").value = marker.getLatLng().lng();
                            });
                            map.addOverlay(marker);
                        }
                    }
                    function showAddress() {
                        var lat, lng;
                        lat = document.getElementById("Product_Latitube").value;
                        lng = document.getElementById("Product_Longitude").value;
                        if (lat == '' && lng == '' || lat == 0 && lng == 0) {
                            map.clearOverlays();
                            map.setCenter(new GLatLng(21.033, 105.850), 15);
                            var marker = new GMarker(new GLatLng(21.033, 105.850), { draggable: true });

                            document.getElementById("Product_Latitube").value = marker.getLatLng().lat();
                            document.getElementById("Product_Longitude").value = marker.getLatLng().lng();

                            //Draggable marker
                            GEvent.addListener(marker, "dragstart", function() {
                                map.closeInfoWindow();
                            });
                            GEvent.addListener(marker, "dragend", function() {
                                document.getElementById("Product_Latitube").value = marker.getLatLng().lat();
                                document.getElementById("Product_Longitude").value = marker.getLatLng().lng();
                            });
                            map.addOverlay(marker);
                        }
                        else {
                            map.clearOverlays();
                            map.setCenter(new GLatLng(lat, lng), 15);
                            var marker = new GMarker(new GLatLng(lat, lng), { draggable: true });

                            document.getElementById("Product_Latitube").value = marker.getLatLng().lat();
                            document.getElementById("Product_Longitude").value = marker.getLatLng().lng();

                            //Draggable marker
                            GEvent.addListener(marker, "dragstart", function() {
                                map.closeInfoWindow();
                            });
                            GEvent.addListener(marker, "dragend", function() {

                                //marker.openInfoWindowHtml("aaaaa"+ marker.getLatLng());
                                document.getElementById("Product_Latitube").value = marker.getLatLng().lat();
                                document.getElementById("Product_Longitude").value = marker.getLatLng().lng();
                            });
                            map.addOverlay(marker);
                        }
                    };
                </script>
            </div>
            <%} %>
             <%if ((listThumImg.Length > 0 && listImg.Length > 0)||(Model.Product.Latitube != null && Model.Product.Longitude != null))
               { %>     
            <div class="link" id="link-img-map">
                <ul>                    
                    <%if (listThumImg.Length > 0 && listImg.Length > 0)
                      { %>   
                    <li style="cursor:pointer" id="actImg">
                        Ảnh
                    </li>
                    <li>|</li>
                    <%} %>
                    <%if (Model.Product.Latitube != null && Model.Product.Longitude != null)
                      { %>
                    <li style="cursor:pointer" id="actMap">
                        Xem bản đồ 
                    </li>
                    <%} %>
                    
                </ul>
            </div>
            <%} %>
            <script type="text/javascript">
                var map = null;
                var geocoder = null;
                function showBigImg($image) {
                    $("#showimg a").attr("href", $image);
                    $("#showimg img").attr("src", $image);
                }                
                $(document).ready(function() {
                    $("#map").hide();
                    $("#actImg").click(function() {
                        $("#photo").show();
                        $("#map").hide();
                    });
                    $("#actMap").click(function() {
                        $("#map").show();
                        $("#photo").hide();
                        initialize();
                        showAddress();

                    });
                });
                
            </script>
        </div>
        <div class="pro-dt">
            <div class="bg-title">
                <h4>Thông tin chi tiết</h4>
            </div>
            <ul>
                <li>
                    <div class="it_l">Địa chỉ</div>
                    <div class="it_r"><%=Html.Encode(Model.Product.Adress) %></div>
                    <div class="clear"></div>
                </li>
                <%if (Model.Product.Project != null)
                  { %>
                <li>
                    <div class="it_l">Thuộc dự án</div>
                    <div class="it_r"><%=Html.Encode(Model.Product.Project.Title)%></div>
                    <div class="clear"></div>
                </li>
                <%} %>
                <li>
                    <div class="it_l">Hướng nhà</div>
                    <div class="it_r"><%=Html.Encode(Model.Product.Direction!=null? Model.Directions[SDT.Lib.Common.Utils.ParseInt(Model.Product.Direction)]:string.Empty)%></div>
                    <div class="clear"></div>
                </li>
                <li>
                    <div class="it_l">Ngày đăng tin</div>
                    <div class="it_r"><%=Model.Product.AddDate.Value.ToString("dd/MM/yyyy") %></div>
                    <div class="clear"></div>
                </li>
                <li>
                    <div class="it_l">Ngày hết hạn</div>
                    <div class="it_r"><%=Model.Product.ExpireDate.HasValue? Model.Product.ExpireDate.Value.ToString("dd/MM/yyyy"):string.Empty %></div>
                    <div class="clear"></div>
                </li>
                <li>
                    <div class="it_l">Mã số</div>
                    <div class="it_r"><%=Model.Product.ID %></div>
                    <div class="clear"></div>
                </li>
            </ul>
            <div class="clear"></div>
            <div class="bg-title">
                <h4>Thông tin liên hệ</h4>
            </div>
            <ul>
                <li>
                    <div class="it_l">Đăng bởi</div>
                    <div class="it_r"><%=Html.Encode(Model.Product.ContactName) %></div>
                    <div class="clear"></div>
                </li>
                <li>
                    <div class="it_l">Địa chỉ</div>
                    <div class="it_r"><%=Html.Encode(Model.Product.ContactAddress) %></div>
                    <div class="clear"></div>
                </li>
                <li>
                    <div class="it_l">Điện thoại</div>
                    <div class="it_r"><%=Html.Encode(Model.Product.ContactMobile) %></div>
                    <div class="clear"></div>
                </li>
                <li>
                    <div class="it_l">Email</div>
                    <div class="it_r"><%=Html.Encode(Model.Product.ContactEmail) %></div>
                    <div class="clear"></div>
                </li>
             </ul>
        </div>
    </div>
    <div class="clear">&nbsp;</div>
    <% Html.RenderPartial("~/Views/Product/Tag.ascx", Model); %>
    <div class="clear">&nbsp;</div>
    <% Html.RenderAction("Poster", "Product", new { id = Model.Product.ID, title ="Tin cùng người đăng"}); %>
    <%if (Model.Product != null)
      { %>
    <% Html.RenderAction("LatestComments", new { id = Model.Product.ID, number = 20 }); %>
    <% Html.RenderAction("Comment", new { id = Model.Product.ID }); %>
    <%} %>
    <div class="clear"></div>
    <% Html.RenderAction("OtherItems", "Product", new { id = Model.Product.ID, number = 3, title ="Tin liên quan"}); %>
    <div class="clear"></div>
    <% Html.RenderAction("OtherItemsInCity", "Product", new { id = Model.Product.ID, number = 5, title ="Các tin khác"}); %>
</div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="PathContent" runat="server">
<% Html.RenderPartial("~/Views/Product/Path.ascx", Model.ProductSearch); %>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="LeftContent" runat="server">
<% Html.RenderPartial("~/Views/Product/Left.ascx", Model.ProductSearch); %>
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="RightContent" runat="server">
    <% Html.RenderPartial("~/Views/Product/SearchSmall.ascx", Model.ProductSearch); %>
    <div class="clear"></div>
    <% Html.RenderPartial("~/Views/Product/PostSmall.ascx"); %>
    <div class="clear"></div>
    <% Html.RenderAction("Hot", "Project", new { number = 3, catid = 0, hotYN = 1, pubYN = 1, title = "Dự án nổi bật", prjorder = "ID", prjorderDir = "desc" }); %>
    <div class="clear"></div>
    <% Html.RenderAction("LastedSmall", "Useful", new { number = 8 }); %>
    <div class="clear"></div>
    <% Html.RenderAction("LastedSmall", "Event", new { number = 5, catid = 0 }); %>    
</asp:Content>
